<template>
  <div class="container">
    <div class="upload-section">
      <el-upload
        class="upload-demo"
        drag
        :before-upload="handleBeforeUpload"
        :show-file-list="false"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件到这里或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            支持.xlsx、.xls格式文件，大小不超过10MB
          </div>
        </template>
      </el-upload>
    </div>

    <div class="notice-section">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>上传注意事项</span>
          </div>
        </template>
        <div class="notice-content">
          <el-alert title="重要提示" type="warning" :closable="false" show-icon>
            <ul class="notice-list">
              <li>请确保Excel文件包含所有必填字段</li>
              <li>必填字段：学员姓名、学号、学员手机号</li>
              <li>日期格式请使用YYYY-MM-DD格式</li>
              <li>状态字段请填写"启用"或"禁用"</li>
              <li>建议先下载模板文件，按模板格式填写</li>
            </ul>
          </el-alert>
          <div class="download-template">
            <el-button type="text" @click="downloadTemplate">下载Excel模板</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <div class="m" v-if="students.length > 0">
      <h4><strong>确认导入学员数据</strong></h4>
      <div class="table-container">
        <el-table
          :data="students"
          style="width: 100%; margin-top: 20px;"
          height="250"
          size="small"
          border
          :fit="true"
        >
          <el-table-column 
            v-for="column in columns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :min-width="column.width"
            show-overflow-tooltip
          >
            <template #default="{row}" v-if="column.prop === 'status'">
              {{ row.status ? '启用' : '禁用' }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 15px;">
        <el-button type="primary" @click="confirmUpload" :loading="uploading">确认上传</el-button>
        <el-button @click="cancelUpload" :disabled="uploading">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import * as XLSX from 'xlsx' 

const students = ref([])
const uploading = ref(false)
const columns = ref([
  { prop: 'name', label: '学员姓名', width: '100' },
  { prop: 'studentId', label: '学号', width: '120' },
  { prop: 'gender', label: '性别', width: '80' },
  { prop: 'age', label: '年龄', width: '80' },
  { prop: 'birthday', label: '出生日期', width: '120' },
  { prop: 'school', label: '学校', width: '150' },
  { prop: 'grade', label: '年级', width: '80' },
  { prop: 'contactPhone', label: '学员手机号', width: '120' },
  { prop: 'parentName', label: '家长姓名', width: '100' },
  { prop: 'parentPhone', label: '家长手机号', width: '120' },
  { prop: 'currentCourse', label: '当前课程', width: '120' },
  { prop: 'enrollmentDate', label: '入学日期', width: '120' },
  { prop: 'status', label: '状态', width: '80' },
  { prop: 'remark', label: '备注', width: '150' }
])

// 下载模板
function downloadTemplate() {
  try {
    // 创建隐藏的下载链接
    const link = document.createElement('a')
    link.href = '/download/学员导入模板.xlsx'
    link.download = '学员导入模板.xlsx'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    ElMessage.success('模板下载开始')
  } catch (error) {
    console.error('下载模板失败:', error)
    ElMessage.error('模板下载失败，请稍后重试')
  }
}

// 其他方法保持不变...
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.upload-section {
  margin-bottom: 20px;
  
  .upload-demo {
    margin: 20px auto;
    max-width: 500px;
    
    .el-upload__tip {
      margin-top: 10px;
      color: var(--el-text-color-secondary);
      font-size: 12px;
      text-align: center;
    }
  }
}

.notice-section {
  margin-bottom: 30px;
  
  .card-header {
    font-weight: bold;
    font-size: 16px;
  }
  
  .notice-content {
    .el-alert {
      margin-bottom: 15px;
    }
    
    .notice-list {
      margin: 0;
      padding-left: 20px;
      line-height: 1.8;
    }
    
    .download-template {
      text-align: center;
      margin-top: 10px;
    }
  }
}

.m {
  margin: 15px;
  h4 {
    margin: 0 0 10px;
  }
}

.table-container {
  width: 100%;
  
  :deep(.el-table) {
    width: auto !important;
    min-width: 100%;
    
    .el-table__cell {
      .cell {
        white-space: nowrap;
        padding: 0 8px;
      }
    }
    
    th.el-table__cell {
      .cell {
        white-space: nowrap;
        font-weight: bold;
      }
    }
  }
}
</style>